import React, {useState} from 'react';
import type {ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
    getAccountList,
    getAgentsList,
    getGroupList,
    getRobotList,
    updateAgent,
    updateProduct,
} from '@/services/bz/bz-api';
import {useRequest} from '@@/plugin-request/request';


const CollectionAccount: React.FC = () => {

    const [accountList, setAccountList] = useState({});
    const [groupList, setGroupList] = useState({});

    useRequest(getAccountList, {
        onSuccess: (res) => {
            let data = {};
            //将拿到的返回值遍历
            res.accountList.map(item => {
                //使用接口返回值的id做为 代替原本的0，1
                data[item.adminId] = {
                    //使用接口返回值中的overdueValue属性作为原本的text:后面的值
                    text: item.adminName,
                };
            });
            setAccountList(data);
        },
    });

    useRequest(getGroupList, {
        onSuccess: (res) => {
            let data = {};
            //将拿到的返回值遍历
            res.groupList.map(item => {
                //使用接口返回值的id做为 代替原本的0，1
                data[item.code] = {
                    //使用接口返回值中的overdueValue属性作为原本的text:后面的值
                    text: item.name,
                };
            });
            setGroupList(data);
        },
    });


    const rightColumns = [
        {
            title: 'Staff No',
            dataIndex: 'staffNo',
            width: 100,
            editable: false,
        },
        {
            title: 'StuffName',
            key: 'name',
            dataIndex: 'name',
            width: 100,
            editable: false,
        },
        {
            title: 'Group-name',
            key: 'groupName',
            dataIndex: 'groupName',
            width: 100,
            valueEnum: groupList,
        },

        {
            title: 'TL-name',
            key: 'tlName',
            dataIndex: 'tlName',
            width: 100,
            editable: false,
            search: false,
        },
        {
            title: 'ProductAccount',
            key: 'collectionAccountName',
            dataIndex: 'collectionAccountName',
            width: 100,
            valueEnum: accountList,
        },
        {
            title: 'Action',
            key: 'option',
            width: 120,
            valueType: 'option',
            render: (_, row, index, action) => [
                <a
                    key='a'
                    onClick={() => {
                        action?.startEditable(row.staffNo);
                    }}
                >
                    Editor
                </a>,
            ],
        },
    ];

    return (
        <>
            <div>
                <ProTable
                    columns={rightColumns}
                    request={async (params: any) => {
                        console.log(12312, params);
                        const response = await getAgentsList(params);
                        let {data: {list}} = response;
                        return {data: list, success: true};
                    }}
                    search={{
                        defaultCollapsed: false,
                        span: 12,
                        labelWidth: 'auto',
                    }}
                    editable={{
                        type: 'multiple',
                        deletePopconfirmMessage: 'Are you sure you want to delete it',
                        onSave: async (key, record, originRow, newLineConfig) => {
                            console.log(record);
                            console.log(record.agentCode, record.groupName, record.collectionAccountName);
                            // await updateProduct(record);

                            await updateAgent({
                                agentCode: record.agentCode,
                                groupName: record.groupName,
                                collectionAccountName: record.collectionAccountName,
                            });
                        },
                        onDelete: async (key, row) => {
                            // await updateProduct(row);
                        },
                    }}
                    rowKey='staffNo'
                    headerTitle='Data'
                    options={false}
                    pagination={false}
                />
            </div>

        </>
    );
};

export default CollectionAccount;